@import '~styles/settings.scss';

.l-home-page {
  overflow: hidden;

  .scroll-to-btn {
    position: absolute;
    top: rem(-20px);
    left: calc(50% - 20px);
  }

  .home-cover {
    overflow: hidden;

    h1,
    p {
      z-index: 1;
    }
  }

  .stop-video-btn {
    z-index: 1;
    position: absolute;
    bottom: rem(20px);
    right: rem(20px);
    background-color: rgba($slate, 0.7);
  }

  .subscribe-btn {
    position: relative;
    z-index: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-top: rem(20px);
    width: fit-content;

    .subscribe-icon {
      margin-right: rem(10px);
    }

    .subscribe-msg {
      color: $white;
      font-weight: 500;
      text-transform: uppercase;
    }
  }

  .home-video {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    overflow: hidden;
    z-index: 0;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;

    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
    }

    > div {
      position: absolute;
      top: rem(-60px);
      left: 0;
      right: 0;
      bottom: rem(-60px);
      height: calc(100% + 120px);
    }

    &.show {
      opacity: 1;
    }
  }

  .summary-card {
    background-color: $grey-light;
    border: 0;
    overflow: hidden;

    .body {
      height: 100%;
    }

    .image {
      position: absolute;
      bottom: rem(-150px);
      left: rem(-100px);
      height: 100%;
      width: 110%;
      background-size: contain;
    }

    .summary {
      margin-bottom: rem(180px);
    }
  }

  .section-summary {
    padding: rem(40px) 0 rem(20px);
    position: relative;
  }

  .section-uses {
    background-color: $grey-light;
    position: relative;

    .uses-title {
      position: absolute;
      top: rem(30px);
      font-size: rem(18px);
      text-transform: uppercase;
      color: rgba($slate, 0.5);
    }

    .uses-carousel {
      margin: 0;
      width: 100%;
    }

    .uses {
      display: flex !important;
      height: 100%;

      > div {
        width: 100%;

        @media screen and (min-width: $screen-m) {
          width: 50%;
        }
      }
    }

    .use-image {
      display: none;
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
      background-size: cover;
      height: 100%;
      width: calc(100% + #{$desktop-gutter * 2});
      margin-left: -$desktop-gutter;

      .use-credit {
        position: absolute;
        bottom: 0;
        right: 0;
        color: $white;
        background-color: rgba(0, 0, 0, 0.2);
        padding: rem(2px) rem(5px);
        font-size: rem(10px);
      }
    }

    .use-example {
      font-size: rem(18px);
      font-style: italic;
      font-weight: 300;
      line-height: 1.7;
      padding: rem(130px) 0 rem(20px);

      @media screen and (min-width: $screen-m) {
        padding: rem(160px) 0 rem(200px);
        padding-left: calc(100% - (#{$screen-xl} / 2) + (#{$desktop-gutter} * 2));
      }

      span {
        font-size: rem(36px);
        color: $green-gfw;
        font-weight: 500;
        line-height: 0;

        &:last-child {
          position: relative;
          top: rem(8px);
          left: rem(3px);
        }
      }
    }

    .use-user {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      font-size: rem(14px);
      width: rem(70px);

      .icon-user {
        width: rem(50px);
        height: rem(50px);
        margin-bottom: rem(10px);
      }
    }

    .slick-slide {
      padding: 0;
    }

    .slick-dots {
      align-items: flex-start;
      margin: rem(20px) 0 0;
      overflow-x: auto;
      padding-bottom: rem(40px);
      justify-content: flex-start;

      @media screen and (min-width: 460px) {
        justify-content: space-around;
      }

      @media screen and (min-width: $screen-m) {
        position: absolute;
        width: calc(50% - #{$desktop-gutter * 2});
        left: $desktop-gutter;
        bottom: rem(40px);
        padding-bottom: 0;
      }

      @media screen and (min-width: $screen-xl) {
        left: calc((100% - #{$screen-xl}) / 2);
        width: calc(50% - ((100% - #{$screen-xl}) / 2));
      }

      li {
        .icon-user {
          fill: $grey-dark;
        }

        &.slick-active {
          .icon-user {
            fill: $green-gfw;
          }
        }
      }
    }

    .slick-active {
      .use-card {
        opacity: 1;
      }

      .use-image {
        @media screen and (min-width: $screen-m) {
          display: block;
        }
      }
    }
  }

  .section-title {
    position: absolute;
    top: rem(50px);
    z-index: 1;
    left: $mobile-gutter;
    color: rgba($slate, 0.5);
    text-transform: uppercase;

    @media screen and (min-width: $screen-m) {
      left: $desktop-gutter;
    }

    @media screen and (min-width: $screen-xl) {
      left: calc(((100% - #{$screen-xl}) / 2) + #{$desktop-gutter});
    }
  }

  .section-apps {
    position: relative;

    .apps {
      height: 100%;
    }

    .section-title {
      color: $white;
    }

    .apps-carousel {
      margin: 0;
      width: 100%;

      .slick-slide {
        padding: 0;
        opacity: 1;

        a {
          height: 100%;
        }
      }

      .slick-arrow {
        background-color: rgba($white, 0.5);
      }

      .slick-next {
        right: rem(5px);

        @media screen and (min-width: $screen-m) {
          right: $desktop-gutter;
        }

        @media screen and (min-width: $screen-xl) {
          right: calc(((100% - #{$screen-xl}) / 2) + #{$desktop-gutter});
        }
      }

      .slick-prev {
        left: rem(5px);

        @media screen and (min-width: $screen-m) {
          left: $desktop-gutter;
        }

        @media screen and (min-width: $screen-xl) {
          left: calc(((100% - #{$screen-xl}) / 2) + #{$desktop-gutter});
        }
      }
    }

    .app-slide {
      cursor: pointer;
      display: block;
      padding: rem(150px) 0 0;
      text-align: center;
      color: $white;
      height: 100%;

      h4 {
        font-size: rem(35px);
        font-weight: 300;
        margin-bottom: rem(10px);
      }

      p {
        color: $white;
        margin: auto;
        margin-bottom: rem(350px);
        font-size: rem(18px);
        max-width: rem(700px);
      }

      .app-content {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        height: 100%;
      }

      .app-image {
        width: 100%;
        max-width: rem(800px);
        margin: auto;
        height: rem(350px);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }

      .app-icon {
        height: rem(40px);
        width: auto;

        &.pro {
          width: rem(75px);
          height: rem(75px);
        }
      }
    }
  }

  .section-news {
    min-height: rem(400px);
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    background-size: cover;
    padding: rem(40px) 0 rem(40px);

    picture {
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
      display: flex;
      width: 100%;
      height: 100%;

      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }

    .news-card {
      color: $slate;
      height: 100%;
    }

    .news-title {
      font-size: rem(35px);
      font-weight: 300;
      color: $white;
      text-align: center;
      margin-bottom: rem(20px);
    }

    .my-gfw-btn {
      min-width: rem(120px);
      margin: auto;
    }

    .news-carousel {
      min-height: rem(300px);
    }

    .no-news p {
      color: $white;
      font-size: rem(18px);
    }
  }
}
